<template>
  <div class="app-container">

    <el-card>
      <div slot="header" class="clearfix">
        <span>
          <el-form :inline="true" :model="filters">
            <el-form-item label="登录名">
              <el-input v-model="filters.username" placeholder="登录名" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="filters.displayName" placeholder="昵称" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="filters.phone" placeholder="电话" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item label="组织">
              <el-input v-model="filters.departmentName" placeholder="组织" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="success" v-show="isAuth('sys:user:search')" icon="el-icon-search" @click="handleSearch">查询</el-button>
              <el-button type="primary" v-show="isAuth('sys:user:add')"  icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
            </el-form-item>
          </el-form>

        </span>
      </div>
      <div>
        <el-table stripe size="mini" fit border highlight-current-row :data="users" element-loading-text="拼命加载中" height="640" v-loading="loading" style="width: 100%;">

          <el-table-column min-width="100" align="center" label="#">
            <template slot-scope="scope">
              {{scope.$index +1}}
            </template>
          </el-table-column>

          <el-table-column prop="username" label="登录名" width="110"  align="center" sortable>
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>姓名: {{ scope.row.username }}</p>
                <p v-if="scope.row.roles != 0">角色: <span v-for="role in scope.row.roles">{{ role['name'] }}, </span></p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.username }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column  prop="displayName" label="昵称" width="100" align="center">
          </el-table-column>

          <el-table-column prop="phone" label="电话" width="150"  align="center">
          </el-table-column>
          <el-table-column prop="departmentName" label="组织" width="150" header-align="center">
          </el-table-column>
          <el-table-column prop="email" label="邮箱"  width="150" header-align="center">
          </el-table-column>
          <el-table-column prop="imageUrl" label="头像" align="center">
            <template slot-scope="scope"  >
              <img class="user-avatar" v-show="scope.row.imageUrl" :src="scope.row.imageUrl+'?imageView2/1/w/40/h/40'">
            </template>
          </el-table-column>
          <el-table-column prop="createdBy" label="创建人" width="100" align="center">
          </el-table-column>
          <el-table-column prop="createdTime" label="创建时间" min-width="130" header-align="center" sortable>
          </el-table-column>
          <el-table-column prop="lastModifiedBy" label="修改人" width="100" align="center">
          </el-table-column>
          <el-table-column prop="lastModifiedTime" label="修改时间" min-width="130" header-align="center"  sortable>
          </el-table-column>
          <el-table-column prop="disabled" label="是否可用" width="100"   align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.disabled" disabled> </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="操作" v-if="isAuth('sys:user:delete') || isAuth('sys:user:update') || isAuth('sys:user:data')"
            min-width="200"
            header-align="center">
            <template slot-scope="scope">
              <el-button size="mini" v-show="isAuth('sys:user:delete')"
                         @click="deleteCurrentRow(scope.$index, scope.row)"
                         :type="scope.row.disabled ? 'danger': 'success'"
                         :icon="scope.row.disabled ? 'el-icon-close':'el-icon-check'"
                         circle></el-button>
              <el-button size="mini" v-show="isAuth('sys:user:update')" @click="addOrUpdateHandle(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>



              <el-popover
                placement="left"
                width="360"
                trigger="hover">
                <el-radio-group v-model="radioLable" @change="radioChange(scope.row)" size="mini">
                  <el-radio label="1"  border>分配角色</el-radio>
                  <el-radio label="2"  border>数据权限</el-radio>
                  <el-radio label="3" border>修改密码</el-radio>
                </el-radio-group>

                <el-button slot="reference" size="mini" v-show="isAuth('sys:user:data')"
                           type="primary" icon="el-icon-setting" circle></el-button>

              </el-popover>

            </template>
          </el-table-column>
        </el-table>

        <el-row>
          <el-col style="margin-top: 13px">
            <div class="block">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="filters.page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="filters.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="filters.total">
              </el-pagination>
            </div>
          </el-col>
        </el-row>

      </div>
    </el-card>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="dialogFormVisible" @refreshDataList="search" ref="addOrUpdate"></add-or-update>

  <!--  <assign-roles v-if="dialogAssignRoles" @refreshDataList="search" ref="assignRoles"></assign-roles>
  -->

    <update-password v-if="dialogUpdatePassword" ref="updatePassword"></update-password>

  </div>
</template>

<script>
  import {getUserListPage,disabledOrEnabled,findUserById} from '@/api/sys/user/';
 // import {bus} from '@/common/bus';
  import {isAuth} from '@/utils/'
  import AddOrUpdate from './addOrUpdate.vue'
  import AssignRoles from './assignRoles.vue'
  import UpdatePassword from './updatePassword.vue'
  export default {
      name:'userManage',
    data() {
      return {
        dialogFormVisible: false,
        dialogUpdatePassword: false,
        filters: {
          username: '',
          displayName:'',
          phone:'',
          page:1,
          total:0,
          limit:10,
        },
        radioLable: '',
        value1:true,
        loading: false,
        roles:[],
        roleIds:[],
        users: [],
        user:{},

      }
    },
    components: {
      AddOrUpdate,
      UpdatePassword
    },
    methods: {
      headerRowClassName({row, rowIndex}){
        return "table-header"
      },
      deleteCurrentRow(index,row){
        let that = this;
        this.$confirm(row.disabled?'确定禁用？':'确定启用？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          disabledOrEnabled(row).then(function (result) {
              let {msg,code} = result.data;
              if(code == 0){
                that.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                that.search();

              }else{
                that.$message.error(msg);
              }

          }).catch(function (error) {
            that.$message.error('操作失败');
          });
        }).catch(() => {
        });

      },
      addOrUpdateHandle(row){
        this.dialogFormVisible=true;
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(row)
        })
      },
      radioChange(row){

        if(this.radioLable == 1){
          this.$router.push({path:'/assignRoles',query:{data: row,cache: true}});

        }else if(this.radioLable == 2){
          this.$router.push({path:'/assignDataScope',query:{data: row,cache: true}});

        }else if(this.radioLable == 3){
          this.dialogUpdatePassword = true;
          this.$nextTick(() => {

            this.$refs.updatePassword.init(row)
          })
        }


        this.radioLable = 0;
      },

      handleSizeChange(val) {
        this.filters.limit = val;
        this.search();
      },
      handleCurrentChange(val) {
        this.filters.page = val;
        this.search();
      },
      handleSearch(){
        this.filters.total = 0;
        this.filters.page = 1;
        this.search();
      },
      //获取用户列表
      search: function () {

        let that = this;
        that.loading = true;
        getUserListPage(that.filters).then(function (response) {
         const result = response.data;
         that.users= [];
         that.filters.total = result.data.totalCount;
          result.data.list.forEach((item) =>{
           that.users.push(item);
         });
          that.loading = false;
        }).catch(function (error) {
          that.loading = false;
        });
      },
      isAuth

    },
    mounted() {
        this.search();
    }
  }
</script>

<style scoped>
  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .table-header {
    background-color: #888888;
  }
</style>
